import React, { CSSProperties } from 'react'
import ShowUser from './ShowUser/ShowUser'
import ChangePwd from './ChangePwd/ChangePwd'
import ChangeAvatar from './ChangeAvatar/ChangeAvatar'
import ChangeName from './ChangeName/ChangeName'
import { inject, observer } from 'mobx-react'
import UserStore from '../../store/modules/userStore'
import { Empty } from 'antd'
import { Link } from 'react-router-dom'
import {ShoppingCartOutlined} from '@material-ui/icons'
const ProfileStyle: CSSProperties = {
    minHeight: '100vh',
    backgroundColor: 'rgb(247,247,247)'
}
interface IProps {
    userStore?: UserStore
}
const Profile = (props: IProps) => {
    return (
        <div style={ProfileStyle}>
            <ShowUser />
            {
                props.userStore?.isLogin ?
                    (
                        <>
                            <ChangeName />
                            <ChangeAvatar />
                            <ChangePwd />
                            <Link to="/cart">
                            <div style={{
                                 backgroundColor: '#fff',
                                 boxShadow: '1px 2px 25px 0px rgb(0 0 0 / 10%)',
                                 borderRadius: '15px',
                                 margin: '2vh 4vw',
                                 padding: '1.5vh 3vw',
                                 display: 'flex',
                                 alignItems: 'center',
                            }}>
                                <ShoppingCartOutlined  fontSize="medium"/>
                                <span style={{fontSize: '12px',color: '#333',marginLeft: '4vw'}}>我的购物车</span>
                            </div>
                            </Link>
                        </>
                    )
                    :
                    (
                        <div style={{
                            height: '60vh',
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center'
                        }}>
                            <Empty description='赶快登录加入猫e家吧！' />
                        </div>
                    )
            }

        </div>
    )
}

export default inject('userStore')(observer(Profile))